<template>
  <div class="dynedStudentAccount">
    <el-card>
      <!-- <statisticsTag :data="optionsData" @searchStatus="searchStatus"/> -->
      <div class="search_wrap">
        <el-input
          placeholder="学员名称/学员邮箱/学员手机号"
          v-model="searchCondition"
          clearable
          style="width: 260px;"
          @change="queryListData"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <!-- <el-select v-model="searchCode" placeholder="请选择" @change="queryListData" filterable clearable>
                    <el-option
                        v-for="item in products"
                        :key="item.id"
                        :label="item.name"
                        :value="item.code">
                    </el-option>
                </el-select> -->
      </div>
      <div class="table_list">
        <el-table
          :data="tableListData"
          min-height="500"
          border
          v-loading="loading"
          style="width: 100%"
        >
          <el-table-column type="index" align="center" width="40" />

          <el-table-column
            v-for="(item, index) in tableCaption"
            :key="index"
            :label="item.label"
            align="center"
            :width="
              item.value == 'create_time'
                ? '160'
                : '' || item.value == 'email'
                ? '200'
                : ''
            "
          >
            <template slot-scope="scope">
              <span>{{ scope.row[item.value] }}</span>
              <!--  <span
                v-else
                @click="
                  goToURL('dynedAccountOperation', {
                    pageType: 'edit',
                    id: scope.row.id
                  })
                "
                style="cursor: pointer; color: #1796EB;"
                >{{ scope.row[item.value] }}</span
              > -->
            </template>
          </el-table-column>
          <!-- <el-table-column label="操作" align="center"  width="94">
                        <template slot-scope="scope">
                            <el-button type="text"  size="small" circle  @click="goToURL('dynedAccountOperation',{ pageType: 'edit', id:scope.row.id })">编辑</el-button>
                　　　　</template>
                    </el-table-column> -->
        </el-table>
        <link-pagination
          :total="total"
          :currentPage="currentPage"
          :limit="limit"
          v-if="total != 0"
          @pagination="getPaginationParams"
        ></link-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import http from "@/api/dyned";
import contract from "@/api/contract_type";
import statisticsTag from "@/components/statisticsTag";
import { changeTitleMinin, deleteMixin, paginationMixin } from "@/mixin";
import { formatDate } from "@/utils";
export default {
  name: "dynedAccountManage",
  mixins: [changeTitleMinin, deleteMixin, paginationMixin],
  data() {
    return {
      http: http,
      statisticsTagData: [],
      product: null,
      searchCondition: null, // 查询条件
      searchCode: null,
      tableListData: [],
      tableCaption: [],
      loading: false,
      optionsData: [
        {
          label: "全部",
          total: 0,
          status: "all",
          icon: "icon-quanbu",
          backgroundStart: "#17B5EB",
          backgroundEnd: "#1797EB"
        },
        {
          label: "已激活",
          total: 0,
          status: "active",
          icon: "icon-yijihuozhanghushu",
          backgroundStart: "#A946EB",
          backgroundEnd: "#A946EB"
        },
        {
          label: "已失效",
          total: 0,
          status: "lose",
          icon: "icon-yishixiao2",
          backgroundStart: "#999",
          backgroundEnd: "#999"
        }
      ],
      products: []
    };
  },
  components: {
    statisticsTag
  },
  methods: {
    goToURL(name, params) {
      this.$router.push({ name, params });
    },
    queryListData() {
      this.getListData();
    },
    searchStatus(status) {
      let statusCode = null;
      switch (status) {
        case "all":
          statusCode = null;
          break;
        case "active":
          statusCode = 1;
          break;
        case "lose":
          statusCode = 0;
          break;
      }
      this.getListData(1, this.limit, statusCode); // 搜索状态
    },

    getListData(
      page = this.currentPage,
      list_rows = this.limit,
      search = this.searchCondition,
      product = this.searchCode
    ) {
      this.loading = true;
      http.getList({ page, list_rows, search, product }).then(res => {
        console.log("res", res);
        this.loading = false;
        this.total = res.data.total;
        this.tableCaption = [
          {
            label: "学员名称",
            value: "name"
          },
          // {
          //   label: "对应学员合同",
          //   value: "contractNo"
          // },
          // {
          //   label: "账号ID",
          //   value: "email"
          // },
          {
            label: "学员邮箱",
            value: "email"
          },
          {
            label: "学员电话",
            value: "mobile"
          },
          {
            label: "初始级别",
            value: "initial_level"
          },
          {
            label: "目标级别",
            value: "target_level"
          },
          {
            label: "账号创建时间",
            value: "create_time"
          },
          {
            label: "开始日期",
            value: "start_date"
          },
          {
            label: "结束日期",
            value: "end_date"
          }
          // {
          //   label: "产品线",
          //   value: "product_name"
          // }
          /* ,{
                    label: "负责人",
                    value: "admin_id"
                } */
        ];
        this.tableListData = res.data.data;
        for (let item of this.tableListData) {
          if (item.start_date) {
            item.start_date = formatDate.toStr(
              new Date(item.start_date),
              "YYYY-MM-DD"
            );
          }
          if (item.end_date) {
            item.end_date = formatDate.toStr(
              new Date(item.end_date),
              "YYYY-MM-DD"
            );
          }
        }
      });
    },
    // 统计数据
    getStudentDynedStatustotal() {
      http.getStudentDynedStatustotal().then(res => {
        this.optionsData[0].total = res.data.all;
        this.optionsData[1].total = res.data.active;
        this.optionsData[2].total = res.data.lose;
      });
    }
  },
  created() {
    //this.getStudentDynedStatustotal();
    this.getListData();
    /* contract.getAllProduct().then(res => {
            this.products = res.data
        }) */
  }
};
</script>

<style lang="scss" scoped>
.dynedStudentAccount {
  height: 100%;
  padding: 10px;
  box-sizing: border-box;
  overflow: auto;
  &::-webkit-scrollbar {
    width: 6px;
    height: 6px;
    cursor: pointer;
    background: #f1f1f1;
  }

  &::-moz-scrollbar {
    display: none;
  }
  &::-ms-scrollbar {
    display: none;
  }
  &::-o-scrollbar {
    display: none;
  }

  &::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 10px;
    width: 10px;
    cursor: pointer;
    background: #bbb;
  }
  &::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    border-radius: 0px;
    background: #f1f1f1;
  }
  .opt_wrap {
    padding: 0px 30px;
    margin-bottom: 20px;
  }
  .search_wrap {
    padding: 20px 30px;
  }
  .table_list {
    padding: 0px 10px;
  }
}
</style>
